/**
 * MIT License
 *
 * Copyright (c) 2018 yadong.zhang
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 *
 *
 * 评论插件
 *
 * @date 2018-01-05 10:57
 * @author zhyd(yadong.zhang0415#gmail.com)
 * @link https://github.com/zhangyd-c
 *
 *
 * 'code', // 插入代码
 * 'head', // 标题
 * 'bold', // 粗体
 * 'italic', // 斜体
 * 'underline', // 下划线
 * 'strikeThrough', // 删除线
 * 'foreColor', // 文字颜色
 * 'backColor', // 背景颜色
 * 'image', // 插入图片
 * 'link', // 插入链接
 * 'list', // 列表
 * 'justify', // 对齐方式
 * 'quote', // 引用
 * 'emoticon', // 表情
 * 'table', // 表格
 * 'video', // 插入视频
 * 'undo', // 撤销
 * 'redo' // 重复
 *
 */
$(function(){
    var _form = {
        valid: function(form){
            var valid = true;
            $(form).find("small").each(function(){
                if($(this).attr("data-bv-result") == "INVALID"){
                    valid = false;
                }
            });
            return valid;
        }
    };
    $.extend({
        comment: {
            detailKey: 'comment-detail',
            menus: ['code', 'bold', 'italic', 'underline', 'image', 'link', 'list', 'quote', 'emoticon'],
            sid: 0,
            _commentDetailModal: '',
            _detailForm: '',
            _detailFormBtn: '',
            _closeBtn: '',
            _commentPid: '',
            _commentPlace: '',
            _commentPost: '',
            _cancelReply: '',
            _commentReply: '',
            initDom: function () {
                $.comment._commentDetailModal = $('#comment-detail-modal');
                $.comment._detailForm = $('#detail-form');
                $.comment._detailFormBtn = $('#detail-form-btn');
                $.comment._closeBtn = $('#comment-detail-modal .close');
                $.comment._commentPid = $('#comment-pid');
                $.comment._commentPlace = $('#comment-place');
                $.comment._commentPost = $('#comment-post');
                $.comment._cancelReply = $('#cancel-reply');
                $.comment._commentReply = $('.comment-reply');
            },
            init: function (options) {
                var $box = $('#comment-box');
                if (!$box || !$box[0]) {
                    return;
                }
                var op = $.extend({
                    menus: $.comment.menus,
                    customMenu: true
                }, options);
                var detailInfoJson = $.tool.parseFormSerialize(localStorage.getItem(this.detailKey));
                var currentUser = '';
                if(detailInfoJson){
                    currentUser = '<small> - 欢迎回来，<a href="'+detailInfoJson.url+'" target="_blank" rel="external nofollow">' + filterXSS(detailInfoJson.nickname) + '<i class="fa fa-smile-o"></i></a></small>';
                }
                var commentBox = '<div id="comment-place">'
                        + '<div class="comment-post" id="comment-post" style="position: relative">'
                        + '<h4 class="bottom-line"><i class="fa fa-commenting-o fa-fw icon"></i><strong>发表评论</strong>' + currentUser + '</h4>'
                        + '<div class="cancel-reply" id="cancel-reply" style="display: none;"><a href="javascript:void(0);" onclick="$.comment.cancelReply(this)" rel="external nofollow"><i class="fa fa-share"></i>取消回复</a></div>'
                        + '<form class="form-horizontal" role="form" id="comment-form">'
                        + '<input type="hidden" name="commentParent" id="comment-pid" value="0" size="22" tabindex="1">'
                        + '<textarea id="comment_content" name="commentContent" style="display: none"></textarea>'
                        + '<div id="editor" style="width: 100%;height: 150px;"></div>'
                        + '<div style="position: absolute;right: 10px;bottom: 65px;font-size: 14px;font-weight: 700;color: #ececec;">HARRIES BLOG<br>http://www.liuhaihua.cn<br>讲文明、要和谐</div>'
                        + '<a id="comment-form-btn" type="button" data-loading-text="正在提交评论..." class="btn btn-default btn-block">提交评论</a>'
                        + '</form></div></div>';
                $box.html(commentBox);
                // 初始化并缓存常用的dom元素
                $.comment.initDom();
                // 创建编辑框
                $.comment.createEdit(op);
                $.comment.loadCommentList($box);
                $.comment.initValidatorPlugin();
            },
            createEdit: function (options) {
                var $selector = '#editor';
                var E = window.wangEditor;
                var editor = new E($selector);
                if(options.customMenu){
                    editor.customConfig.menus = options.menus;
                }

                // debug模式下，有 JS 错误会以throw Error方式提示出来
                editor.customConfig.debug = false;

                // 关闭粘贴样式的过滤
                editor.customConfig.pasteFilterStyle = false;
                // 插入网络图片的回调
                editor.customConfig.linkImgCallback = function (url) {
                    // console.log(url) // url 即插入图片的地址
                };
                editor.customConfig.zIndex = 100;
                var $content = $('#comment_content');
                editor.customConfig.onchange = function (html) {
                    // 让编辑器始终处于最底部
                    // var $dom = document.getElementsByClassName("w-e-text")[0];
                    // $dom.scrollTop = $dom.scrollHeight;
                    // 监控变化，同步更新到 textarea
                    $content.val(filterXSS(html));
                };
                editor.create();
                $content.val(editor.txt.html());
                E.fullscreen.init($selector);
            },
            loadCommentList: function (box, pageNumber) {
                var sid = box.attr("data-id");
                // 该属性为了静态页面中防止请求服务器特加的属性，实际可能不用。
                var autoLoad = box.attr("data-auto-load");
                if(autoLoad && autoLoad == "false"){
                    return false;
                }
                if(!sid){
                    throw "未指定sid！";
                }
                this.sid = sid;
                $.ajax({
                    type: "post",
                    url: "/api/comments",
                    data: {sid: sid, pageNumber: pageNumber || 1},
                    success: function (json) {                               
                      // $.tool.ajaxSuccess(json);
                        // 加载 评论列表 start
                        var commentList = json.data.list;
                       // console.log(commentList);
                        var commentListBox  = '';
                        if(json.data.size==0){
                            commentListBox = '<div class="commentList" >'
                                    + '<h4 class="bottom-line"><i class="fa fa-comments-o fa-fw icon"></i><strong><em>0</em> 条评论</strong></h4>'
                                    + '<ul class="comment">';
                            commentListBox += '<li><div class="list-comment-empty-w fade-in">'
                                    +'<div class="empty-prompt-w">'
                                    +'<span class="prompt-null-w">还没有评论，快来抢沙发吧！</span>'
                                    +'</div>'
                                    +'</div></li>';
                            // 加载 评论列表 end
                         //   commentListBox += '</ul></div>';
                            $(commentListBox).appendTo(box);
                        }else{
                            // 首次加载-刷新页面后第一次加载，此时没有点击加载更多进行分页
                            if(!pageNumber) {
                            	//box.attr("data-auto-load","false");
                                commentListBox = '<div class="commentList"   data-auto-load="false" >'
                                        + '<h5 class="bottom-line"><i class="fa fa-comments-o fa-fw icon"></i><strong><em>' + json.data.total + '</em> 条评论</strong></h5>'
                                        + '<ul class="comment">';
                            }
                            for(var i = 0, len = commentList.length; i < len ; i ++){
                                var comment = commentList[i];
                                var userUrl = comment.commentAuthorUrl || "javascript:void(0)";
                                var parent = comment.parent;
                                var parentQuote = parent ? '<a href="#comment-' + parent.commentId + '" class="comment-quote">@' + parent.commentAuthor + '</a><div style="background-color: #f5f5f5;padding: 5px;margin: 5px;border-radius: 4px;"><i class="fa fa-quote-left"></i><p></p><div style="padding-left: 10px;">' + filterXSS(parent.commentContent) + '</div></div>' : '';
                                commentListBox += '<li>' +
                                        '    <div class="comment-body fade-in" id="comment-'+comment.commentId+'">' +
                                        '        <div class="cheader">' +
                                        '           <div class="user-img"><img class="userImage" src="" onerror="this.src=\'' + appConfig.staticPath + '/img/user.png\'"></div>' +
                                        '           <div class="user-info">' +
                                        '              <div class="nickname">' +
                                        '                 <a target="_blank" href="' +  comment.commentAuthorUrl + '" rel="external nofollow"><strong>' + comment.commentAuthor + '</strong></a>' +
                                        '              </div>            ' +
                                        '             <div class="timer">' +
                                        '                  <i class="fa fa-clock-o fa-fw"></i>' + comment.commentDate +
                                        '                  <i class="fa fa-map-marker fa-fw"></i>' + comment.commentAuthorIp +
                                        '              </div>' +
                                        '          </div>' +
                                        '        </div>' +
                                        '        <div class="content">' + parentQuote + '<div>' + filterXSS(comment.commentContent) + '</div></div>' +
                                        '        <div class="sign">' +
                                        '            <a href="javascript:void(0);" class="comment-reply" onclick="$.comment.reply(' + comment.commentId + ', this)"><i class="fa fa-reply"></i>回复</a>' +
                                        '        </div>' +
                                        '    </div>' +
                                        '</li>';
                            }
                            // 如果存在下一页，则显示加载按钮
                            if(json.data.hasNextPage){
                                commentListBox += '<li><div class="list-comment-empty-w fade-in">'
                                        +'<div class="empty-prompt-w">'
                                        +'<span class="prompt-null-w pointer load-more">加载更多 <i class="fa fa-angle-double-down"></i></span>'
                                        +'</div>'
                                        +'</div></li>';
                            }
                            // 加载 评论列表 end

                            if(!pageNumber) {
                                // 首次加载-刷新页面后第一次加载，此时没有点击加载更多进行分页
                                commentListBox += '</ul></div>';
                                $(commentListBox).appendTo(box);
                            }else{
                                // 点击加载更多时，列表追加到ul中
                                $(commentListBox).appendTo($(".comment"));
                            }

                            // 加载更多按钮
                            $(".load-more").click(function () {
                                $(this).parents('li').hide();
                                $.comment.loadCommentList(box, json.data.nextPage)
                            });
                        }
                    },
                    error: $.tool.ajaxError
                });
            },
            initValidatorPlugin: function () {
                $.comment._detailForm.bootstrapValidator({
                    message: "输入值无效",
                    feedbackIcons: {
                        valid: "fa fa-check",
                        invalid: "fa fa-remove",
                        validating: "fa fa-refresh"
                    },
                    fields: {
                        nickname: {
                            validators: {
                                notEmpty: {
                                    message: "昵称必填"
                                }
                            }
                        },
                        url: {
                            validators: {
                                uri: {
                                    message: "URL地址不正确"
                                }
                            }
                        },
                        email: {
                            validators: {
                                emailAddress: {
                                    message: "邮箱地址不正确"
                                }
                            }
                        }
                    }
                });
            },
            submit: function (target) {
                var $this = $(target);
                $this.button('loading');
                var detail = localStorage.getItem(this.detailKey);
                var data = $("#comment-form").serialize();
                if(!detail){
                }else{
                    var detailInfoJson = $.tool.parseFormSerialize(detail);
                    $.comment._detailForm.find("input").each(function () {
                        var $this = $(this);
                        var inputName = $this.attr("name");
                        if(detailInfoJson[inputName]){
                            $this.val(detailInfoJson[inputName]);
                        }
                    });
                    var $img = $.comment._detailForm.find('img');
                    $img.attr('src', detailInfoJson.avatar);
                    $img.removeClass('hide');

                }
                this._commentDetailModal.modal('show');
                this._closeBtn.unbind('click');
                this._closeBtn.click(function () {
                    setTimeout(function () {
                        $this.html("<i class='fa fa-close'></i>取消操作...");
                        setTimeout(function () {
                            $this.button('reset');
                        }, 1000);
                    }, 500);
                });
                // 模态框抖动
                this._commentDetailModal.find('.modal-content').addClass("shake");
                $.comment._detailForm.find("input[name=qq]").unbind('change');
                $.comment._detailForm.find("input[name=qq]").change(function () {
                    var $this = $(this);
                    var qq = $this.val();
                    var $nextImg = $this.next('img');
                    if(qq){
                        $.ajax({
                            type: "post",
                            url: "/api/qq/" + qq,
                            success: function (json) {
                               $.tool.ajaxSuccess(json);
                                var data = json.data;
                                $.comment._detailForm.find("input").each(function () {
                                    var $this = $(this);
                                    var inputName = $this.attr("name");
                                    if(data[inputName]){
                                        $this.val(data[inputName]);
                                    }
                                });
                                $nextImg.attr('src', data.avatar);
                                $nextImg.removeClass('hide');
                            },
                            error: $.tool.ajaxError
                        });
                    }else{
                        $nextImg.addClass('hide');
                    }

                });

                // 提交评论
                this._detailFormBtn.unbind('click');
                this._detailFormBtn.click(function () {
                    $.comment._detailForm.bootstrapValidator("validate");
                    if (_form.valid($.comment._detailForm)) {
                        data = data + "&" + $.comment._detailForm.serialize();
                        localStorage.setItem($.comment.detailKey, $.comment._detailForm.serialize());
                        submitForm(data);
                    }
                });

                function submitForm(data) {
                    $.comment._detailFormBtn.button('loading');
                    $.ajax({
                        type: "post",
                        url: "/api/comment",
                        data: data + '&commentPostId=' + $.comment.sid,
                        success: function (json) {
                            $.comment._detailFormBtn.button('reset');
                            $.tool.ajaxSuccess(json);
                            $.comment._commentDetailModal.modal('hide');

                            setTimeout(function () {
                                $this.html("<i class='fa fa-check'></i>" + json.message);
                                setTimeout(function () {
                                    $this.button('reset');
                                    window.location.reload();
                                }, 3000);
                            }, 1000);
                        },
                        error: function (data) {
                            $.tool.ajaxError();
                            $this.button('reset');
                        }
                    });
                }
            },
            reply: function (pid, target) {
                this._commentPid.val(pid);
                this._cancelReply.show();
                this._commentPost.find('h5 i').addClass("shake");
                $(target).hide();
                $(target).parents('.comment-body').append(this._commentPost);
            },
            cancelReply: function (target) {
                this._commentPid.val("");
                this._cancelReply.hide();
                $(target).parents(".comment-body").find('.comment-reply').show();
                this._commentPost.find('h5 i').addClass("shake");
                this._commentPlace.append(this._commentPost);
            },
            /* 赞 */
            praise: function (pid, target) {
                $.bubble.unbind();
                $.ajax({
                    type: "post",
                    url: "/api/doSupport/" + pid,
                    success: function (json) {
                        $.tool.ajaxSuccess(json);
                        if(json.status == 200){
                            $(target).effectBubble({y:-80, className:'thumb-bubble', fontSize: 1, content: '<i class="fa fa-smile-o"></i>+1'});
                            var oldCount = $(target).find('span.count').text();
                            $(target).find('span.count').text(parseInt(oldCount) + 1);
                        }
                        $.bubble.init();
                    },
                    error: function () {
                        $.tool.ajaxError();
                        $.bubble.init();
                    }
                });
            },
            /* 踩 */
            step: function (pid, target) {
                $.bubble.unbind();
                $.ajax({
                    type: "post",
                    url: "/api/doOppose/" + pid,
                    success: function (json) {
                        $.tool.ajaxSuccess(json);
                        if(json.status == 200){
                            $(target).effectBubble({y:-80, className:'thumb-bubble', fontSize: 1, content: '<i class="fa fa-meh-o"></i>+1'});
                            var oldCount = $(target).find('span.count').text();
                            $(target).find('span.count').text(parseInt(oldCount) + 1);
                        }
                        $.bubble.init();
                    },
                    error: function () {
                        $.tool.ajaxError();
                        $.bubble.init();
                    }
                });
            },
            /* 举报 */
            report: function (pid, target) {
            }
        }
    });

    $.comment.init({customMenu: true});

    $("#comment-form-btn").click(function () {
        $.comment.submit($(this));
    });

    window.wangEditor.fullscreen = {
        init: function (editorSelector) {
            $(editorSelector + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_fullscreen" href="###" onclick="window.wangEditor.fullscreen.toggleFullscreen(\'' + editorSelector + '\')" data-toggle="tooltip" data-placement="bottom" title data-original-title="全屏编辑"><i class="fa fa-expand"></i></a></div>')
        }, toggleFullscreen: function (editorSelector) {
            $(editorSelector).toggleClass('fullscreen-editor');
            var $a = $(editorSelector + ' ._wangEditor_btn_fullscreen');
            var $i = $a.find("i:first-child");
            if ($i.hasClass("fa-expand")) {
                $a.attr("data-original-title", "退出全屏");
                $i.removeClass("fa-expand").addClass("fa-compress")
            } else {
                $a.attr("data-original-title", "全屏编辑");
                $i.removeClass("fa-compress").addClass("fa-expand")
            }
        }
    };
});